<template>
  <div>
    <div class="title contains">
      <span class="icon"></span>
      {{item.title}}
    </div>
    <div>

      <tick-item class="item-chilren" :item="childrenItem" v-if=" item.children"
                 v-for="(childrenItem,childrenIndex) in item.children"
                 :key="childrenIndex">
      </tick-item>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TickItem',
    props: {
      item: Object
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  /*.icons >>> .swiper-container*/
  .contains
    display block
    height 0.4rem

    .icon
      position: relative
      left .1rem
      top 0.075rem
      display: inline-block
      width: .2rem
      height: .2rem
      background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.22rem no-repeat
      margin-right: .1rem
      background-size: .2rem 1.5rem

    .title
      line-height 0.4rem

    .item-chilren
      padding: 0 .2rem

</style>
